<template lang="pug">
data-page(
  v-bind="pageParams"
)
  mt-table(
    v-bind="tableProps"
  )

  Detail(
    v-model="viewingItem"
  )
</template>

<script setup lang="ts">
import {
  type FormItemProps,
  type IAction,
  type DataPageProps,
  type TableProps,
} from "@scmt/common-components";
import { useApi } from "@scmt/core-api";
import { useRequest } from "@scmt/common-hooks";
import type { LisDataEntity, LisDataQueryParams } from "@scmt/api-lis-lis-data";
import Detail from "./instrument/Detail.vue";

const $api = useApi();
const props = defineProps({
  deviceId: {
    type: String,
    default: "",
  },
});
const queryPramas = reactive<LisDataQueryParams>({
  pageNum: 1,
  pageSize: 20,
});

const { deviceId } = toRefs(props);

const viewingItem = ref<null | LisDataEntity>(null);

const { request, data, loadingMap } = useRequest(
  {
    tableData: async (q: any) => {
      if (!deviceId.value)
        return {
          items: [],
          pagination: {
            total: 0,
            pageNum: queryPramas.pageNum,
            pageSize: queryPramas.pageSize,
          },
        };

      const params = Object.assign({}, queryPramas, q, {
        type: deviceId.value,
      });
      return $api.lis.lisData.query(params);
    },
  },
  {
    tableData: {
      items: [] as LisDataEntity[],
      pagination: {
        total: 0,
        pageNum: queryPramas.pageNum,
        pageSize: queryPramas.pageSize,
      },
    },
  }
);

const pageParams = computed<DataPageProps>(() => {
  const queryFields: FormItemProps[] = [
    {
      prop: "name",
      label: "项目名称",
    },
  ];

  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    onQuery: () => request("tableData"),
    onAct: onPageActions,
    columns: 2,
  };

  return dataPageProps;
});

const tableProps = computed(() => {
  const { tableData } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    insertIndex: false,
    pagerCount: 5,
    columns: [
      {
        prop: "personName",
        label: "患者姓名",
        width: 90,
      },
      {
        prop: "code",
        label: "标本条码",
        width: 130,
      },
      {
        prop: "equipmentManufacturerModel",
        label: "设备编码",
        tooltip: true,
      },
      {
        prop: "item",
        label: "检验项目",
      },
      {
        prop: "data",
        label: "检验结果",
        tooltip: true,
      },
      {
        prop: "createTime",
        label: "上传时间",
        format: "datetime",
      },
      {
        label: "操作",
        fixed: "left",
        width: 80,
        actions: ["view"],
      },
    ],
    onAct: onPageActions,
    onPaginate: getData,
  };
  return tableProps;
});

watch(
  deviceId,
  () => {
    getData();
  },
  {
    immediate: true,
  }
);

const onPageActions = (action: IAction, model?: any) => {
  switch (action.event) {
    case "view":
      viewingItem.value = model;
      break;
  }
};

function getData(q?: any) {
  request("tableData", q);
}
</script>

<style lang="less" scoped></style>
